<template>
  <el-container>
    <el-header>物流信息管理系统</el-header>
    <el-container>
        <el-aside width="200px">
            <el-menu
                :default-active="defaultActive" 
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
                <el-menu-item index="1" @click="jumpUpload">
                    <i class="el-icon-menu"></i>
                    <span>物流线路管理</span>
                </el-menu-item>
                <el-menu-item index="2" @click="jump">
                    <i class="el-icon-menu"></i>
                    <span>文件管理</span>
                </el-menu-item>
                <el-menu-item index="3" @click="user">
                    <i class="el-icon-document" ></i>
                    <span>用户列表</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>
  </el-container>
</template>

<script>
    export default {
        data() {
            return {
                defaultActive: '2' // 默认选中文件管理菜单项
            };
        },
        mounted() {
            this.defaultActive = this.$route.path;
            if (this.$route.path === "/file") {
                this.defaultActive = "2";
            } else if (this.$route.path === "/route") {
                this.defaultActive = "1";
            } else if (this.$route.path === "/user") {
                this.defaultActive = "3";
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            jump() {
                this.$router.push("/file-manager");
            },
            jumpUpload() {
                this.$router.push("/logistics-route-manager");
            },
            user() {
                this.$router.push("/user-manager");
            }
        }
    }
</script>

<style>
/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}


.el-header {
  background-color: #ff6f91; 
  color: #ffffff;
  text-align: center;
  font-size: 24px;
  height: 60px;
  line-height: 60px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
}


.el-aside {
  height: 90vh;
  background-color: #ff85a1; 
  color: #ffffff;
  text-align: center;
  padding-top: 20px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); 
}

.el-main {
  background-color: #ffe5e5; 
  padding: 20px;
  min-height: 90vh;
}

.el-menu-item {
  display: flex;
  align-items: center;
  color: #ffffff; 
  padding: 10px 20px; 
  transition: background-color 0.3s ease; 
}

.el-menu-item i {
  margin-right: 10px;
}

.el-menu-item span {
  font-size: 16px;
}


.el-menu-item.is-active {
  background-color: #ff6f91; 
}


.el-menu-item:hover {
  background-color: #ff6f91; 
}

</style>
